;(function ($) {
  class Paging {
    constructor(ele, options) {
      this.$element = ele
      this.opts = Object.assign(
        {
          textAlign: 'left',
          currentPage: 1,
          total: 0,
          pageSizes: [10, 20, 30, 40, 50],
          pageSize: 10,
          layout: ['total', 'sizes', 'prev', 'pager', 'next', 'jumper'],
          handleSizeChange() {},
          handleCurrentChange() {},
        },
        options
      )
      this.renderView = this.renderView
      this.init()
    }

    init() {
      this.renderView()
      const th = this
      this.$element.click(function (e) {
        const { pageSize, currentPage } = th.opts
        const className = e.target.className.animVal || e.target.className
        let num
        switch (className) {
          case 'super-number-branches': // 页数
            num = Number($(`#${e.target.id} option:selected`).val())
            if (pageSize == num) return
            th.setOpts({ pageSize: num, currentPage: 1 })
            th.setPage(num)
            break
          case 'super-paging-number': // 页码
            num = Number($(e.target).text())
            th.setOpts({ currentPage: num })
            th.handleCurrentChange(num)

            break
          case 'super-paging-previous-page-path': // 上一页
            th.previousPage(currentPage - 1)
            break
          case 'super-previous-page-icon': // 上一页
            th.previousPage(currentPage - 1)
            break
          case 'super-paging-fast-reverse-path': // 上五页
            th.fastReverse()
            break
          case 'super-paging-fast-reverse-icon': // 上五页
            th.fastReverse()
            break
          case 'super-paging-fast-forward-icon': // 下五页
            th.fastForward(currentPage + 5)
            break
          case 'super-paging-fast-forward-path': // 下五页
            th.fastForward(currentPage + 5)
            break
          case 'super-next-page-icon': // 下一页
            th.nextPage(currentPage + 1)
            break
          case 'super-paging-next-page-path': // 下一页
            th.nextPage(currentPage + 1)
            break

          case 'super-pagination-jump-input':
            $(`.${className}`).keyup(function (e) {
              if (e.which === 13) {
                const numberPages = Math.ceil(th.opts.total / th.opts.pageSize)
                num = Number($(e.target).val())
                if (num < 1) num = 1
                if (num > numberPages) num = numberPages
                th.setOpts({ currentPage: num })
                th.handleCurrentChange(num)
                th.renderView()
              }
            })

            break
        }
        if ('super-pagination-jump-input' != className) {
          th.renderView()
        }
      })
    }

    // 渲染视图
    renderView(opts) {
      this.$element.html(' ')
      this.opts = Object.assign(this.opts, opts)
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts

      let numberBranches = '',
        totalDom = '',
        previousPage = '',
        pagingPage = '',
        fastForward = '',
        paginationJump = ''

      const th = this
      layout.forEach(function (item) {
        switch (item) {
          case 'total': // 总数
            totalDom = `<span class="super-paging-total" id="super_paging_total">共${total}条</span>`
            break
          case 'sizes': // 条数
            numberBranches = th.getNumberBranches()
            break
          case 'prev': // 上一个
            previousPage = th.getPreviousPage()
            break
          case 'pager': // 页码
            pagingPage = th.getPagingPage()
            break
          case 'next': // 下一个
            fastForward = th.getFastForward()
            break
          case 'jumper': // 前往 页
            paginationJump = th.getPaginationJump()
            break
        }
      })

      this.$element.append(`<div class="super-paging"style="text-align:${this.opts.textAlign};">
        ${totalDom}
        ${numberBranches}
        ${previousPage}
        ${pagingPage}
        ${fastForward}
        ${paginationJump}
      </div>`)

    }

    // 页码按钮
    getPagingPage() {
      const currentPage = this.opts.currentPage
      const numberPages = Math.ceil(this.opts.total / this.opts.pageSize)

      let pagingPage = `<ul class="super-paging-page">`
      if (currentPage <= 3) {
        let frequency = 5
        if (numberPages < 5) {
          frequency = numberPages - 5 + frequency
        }
        for (let i = 0; i < frequency; i++) {
          if (i + 1 == currentPage) {
            pagingPage += `<li class="super-paging-number super-active">${
              i + 1
            }</li>`
          } else {
            pagingPage += `<li class="super-paging-number">${i + 1}</li>`
          }
        }
      } else if (currentPage >= numberPages - 3) {
        for (let i = numberPages - 4; i <= numberPages; i++) {
          if (i == currentPage) {
            pagingPage += `<li class="super-paging-number super-active">${i}</li>`
          } else if (0 == i) {
          } else {
            pagingPage += `<li class="super-paging-number">${i}</li>`
          }
        }
      } else {
        for (let i = currentPage - 2; i < currentPage + 3; i++) {
          if (i == currentPage) {
            pagingPage += `<li class="super-paging-number super-active">${i}</li>`
          } else {
            pagingPage += `<li class="super-paging-number">${i}</li>`
          }
        }
      }
      pagingPage += `</ul>`
      return pagingPage
    }

    // 页数选择
    getNumberBranches() {
      const { pageSize, pageSizes } = this.opts

      let options = `<select class="super-number-branches" id="super_number_branches">`
      pageSizes.forEach(function (item) {
        if (item == pageSize) {
          options += `<option value="${item}" selected="selected">${item}条/页</option>`
        } else {
          options += `<option value="${item}" >${item}条/页</option>`
        }
      })
      options += ` </select>`
      return options
    }

    // 上一页 上多页
    getPreviousPage() {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      if (currentPage <= 1) return ''
      return `
      <div class="super-paging-previous-page" id="super_paging_previous_page"><svg t="1708326859006" id="super_previous_page_icon" class="super-previous-page-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4203"><path class="super-paging-previous-page-path" d="M353.323071 246.407016L620.37222 510.637979l-265.320785 268.146133c-11.776208 11.775184-11.73425201 30.908964 0.091074 42.73429l0.001023 0c11.825326 11.82635 30.958082 11.867282 42.72815-2.930749L680.899758 535.559579c3.817955-4.273327 8.205892-9.321296 8.933463-12.045337 4.470825-11.112082 2.232854-24.76503301-6.710842-35.987632l-286.98213-286.98213c-11.875468-8.847505-31.096229-8.893554-42.922578 2.932796C341.393367 215.303624 341.439416 234.523361 353.323071 246.407016z" p-id="4204" fill="#222"></path></svg></div>
      <div class="super-paging-fast-reverse"><svg t="1709694608668" class="super-paging-fast-reverse-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6082" ><path class="super-paging-fast-reverse-path" d="M258.64 512l271.53 271.529c16.662 16.662 16.662 43.677 0 60.34-16.662 16.662-43.678 16.662-60.34 0l-301.699-301.7c-16.662-16.661-16.662-43.677 0-60.339l301.7-301.699c16.661-16.662 43.677-16.662 60.339 0 16.662 16.663 16.662 43.678 0 60.34L258.64 512z" p-id="6083" fill="#2c2c2c"></path><path class="super-paging-fast-reverse-path" d="M558.64 512l271.53 271.529c16.662 16.662 16.662 43.677 0 60.34-16.662 16.662-43.678 16.662-60.34 0l-301.699-301.7c-16.662-16.661-16.662-43.677 0-60.339l301.7-301.699c16.661-16.662 43.677-16.662 60.339 0 16.662 16.663 16.662 43.678 0 60.34L558.64 512z" p-id="6084" fill="#2c2c2c"></path></svg></div>
        `
    }

    // 下一页 下多页
    getFastForward() {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      const numberPages = Math.ceil(total / pageSize)

      if (currentPage >= numberPages) return ''
      return `
      <div class="super-paging-fast-forward"><svg t="1709694322841" class="super-paging-fast-forward-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5286"><path class="super-paging-fast-forward-path" d="M774.36 512L502.83 783.529c-16.662 16.662-16.662 43.677 0 60.34 16.662 16.662 43.678 16.662 60.34 0l301.699-301.7c16.662-16.661 16.662-43.677 0-60.339l-301.7-301.699c-16.661-16.662-43.677-16.662-60.339 0-16.662 16.663-16.662 43.678 0 60.34L774.36 512z" p-id="5287" fill="#2c2c2c"></path><path class="super-paging-fast-forward-path" d="M474.36 512L202.83 783.529c-16.662 16.662-16.662 43.677 0 60.34 16.662 16.662 43.678 16.662 60.34 0l301.699-301.7c16.662-16.661 16.662-43.677 0-60.339l-301.7-301.699c-16.661-16.662-43.677-16.662-60.339 0-16.662 16.663-16.662 43.678 0 60.34L474.36 512z" p-id="5288" fill="#2c2c2c"></path></svg></div>
      <div class="super-paging-next-page"><svg t="1708326859006" class="super-next-page-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4203"><path class="super-paging-next-page-path" d="M353.323071 246.407016L620.37222 510.637979l-265.320785 268.146133c-11.776208 11.775184-11.73425201 30.908964 0.091074 42.73429l0.001023 0c11.825326 11.82635 30.958082 11.867282 42.72815-2.930749L680.899758 535.559579c3.817955-4.273327 8.205892-9.321296 8.933463-12.045337 4.470825-11.112082 2.232854-24.76503301-6.710842-35.987632l-286.98213-286.98213c-11.875468-8.847505-31.096229-8.893554-42.922578 2.932796C341.393367 215.303624 341.439416 234.523361 353.323071 246.407016z" p-id="4204" fill="#222"></path></svg></div>`
    }

    // 前往  页
    getPaginationJump() {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      return `
      <span class="super-pagination-jump">前往
        <input class="super-pagination-jump-input" type="number" value="${currentPage}" >
      页</span>`
    }

    // 修改 opts 数据
    setOpts(opts) {
      this.opts = Object.assign(this.opts, opts)
    }

    setPage(num) {
      this.opts.handleSizeChange(num)
    }

    handleCurrentChange(num) {
      this.opts.handleCurrentChange(num)
    }

    // 上一页
    previousPage(num) {
      this.setOpts({ currentPage: num })
      this.handleCurrentChange(num)
    }

    // 上五页
    fastReverse() {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      let num
      if (currentPage - 5 < 1) {
        num = 1
      } else {
        num = currentPage - 5
      }
      this.setOpts({ currentPage: num })
      this.handleCurrentChange(num)
    }

    // 下五页
    fastForward(num) {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      const numberPages = Math.ceil(total / pageSize)
      if (numberPages < num) {
        this.setOpts({ currentPage: numberPages })
        this.handleCurrentChange(numberPages)
      }else {
        this.setOpts({ currentPage: num })
        this.handleCurrentChange(num)
      }
    }

    // 下一页
    nextPage(num) {
      const { currentPage, pageSize, total, layout, pageSizes } = this.opts
      const numberPages = Math.ceil(total / pageSize)
      if (numberPages < num) return
      this.setOpts({ currentPage: num })
      this.handleCurrentChange(num)
    }
  }
  $.fn.SuperPaging = function (opts) {
    return new Paging(this, opts)
  }
})(window.jQuery)
